<template>
  <div>
    <a-card>
      <div class="col-content">
        <a-icon type="dropbox" class="col-icon" />
        <div>
          <span style="font-size: 22px">应用数</span>
          <span style="font-size: 26px; font-weight: bolder;">{{appResourceData.total}}个</span>
        </div>
      </div>

      <p class="app-title">应用状态</p>

      <a-row
        v-for="(item, i) in appResourceList"
        :key="i"
      >
        <a-col
          v-for="d in item"
          :key="d.key"
          :span="8"
        >
          <div class="app-desc">
            <div class="app-desc-title">
              <span style="min-width: 16%;">{{d.label}}</span>
              <span style="font-weight: bolder;">{{appResourceData[d.key]}}个</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
  export default {
    name: 'AppResource',
    props: {
      appResourceData: {
        type: Object,
        default: () => ({})
      },
    },
    data() {
      return {
        appResourceList: {
          section1: [{
            key: 'cpuNum',
            label: '计算密集型'
          }, {
            key: 'ioNum',
            label: '磁盘IO密集型'
          }, {
            key: 'aiNum',
            label: '人工智能型'
          }],
          section2: [{
            key: 'offlineNum',
            label: '离线型'
          }, {
            key: 'realtimeNum',
            label: '实时型'
          }, {
            key: 'sequentialNum',
            label: '时序型'
          }],
        },
      }
    },
  }
</script>
<style
  lang="less"
  scoped
>
  .col-content {
    display: flex;

    .col-icon {
      color: #009688;
      font-size: 62px;
      margin-right: 25px;
      margin-top: 7px;
    }

    img {
      margin-right: 18px;
    }

    & span {
      display: block;
    }
  }

  .app-title {
    margin: 50px 0;
    padding: 35px 0 0 50px;
    border-top: 1px solid #DBDBDB;
    font-size: 22px;
    font-weight: normal;
    color: #101010;
  }

  .app-desc {
    margin-right: 15px;
    padding: 15px 0 35px 75px;

    .app-desc-title {
      span {
        font-size: 18px;

        &:first-of-type {
          display: inline-block;
          width: 42%;
        }
      }
    }
  }
</style>